<template>
  <NuxtLayout name="default">
    <div class="">
      <header data-aos="fade-up">
        <div class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-3 bg-primary position-relative">
          <div class="container-fluid text-white h-100">
            <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
              <div class="col pt-4 pb-4">
                <h1 class="display-3">Build something <strong>nice</strong> & easy</h1>
                <h5 class="font-weight-light mb-4"
                  >With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> & <strong><i class="fab fa-sass fa-2x text-info"></i></strong
                ></h5>
                <a href="#" class="btn btn-lg btn-outline-white btn-round">Learn more</a>
              </div>
              <div class="col align-self-bottom align-items-right text-right h-max-380 h-xl-560 position-relative z-index-1">
                <img src="@/assets/images/index/1.png" class="rounded img-fluid" />
              </div>
            </div>
          </div>
        </div>
      </header>
      <main class="container">
        <section class="pt-4 pb-5">
          <h3 class="h5 mb-4 font-weight-bold" data-aos="fade-up">Cards</h3>
          <div class="row" data-aos="fade-up">
            <div class="col-lg-6">
              <div class="card bg-dark overlay overlay-black text-white shadow-sm border-0">
                <img class="card-img" src="@/assets/images/index/2.jpg" />
                <div class="card-img-overlay d-flex align-items-center text-center">
                  <div class="card-body">
                    <h3 class="card-title">Overlay center align</h3>
                    <p class="card-text text-muted"> With supporting text below as a natural lead-in to additional content. </p>
                    <a href="#" class="btn btn-info btn-round">Do anything</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="card bg-dark overlay overlay-blue text-white shadow-sm border-0 mt-sm-4 mt-lg-0">
                <img class="card-img" src="@/assets/images/index/3.jpg" />
                <div class="card-img-overlay d-flex align-items-center text-center">
                  <div class="card-body">
                    <h3 class="card-title">Special title treatment</h3>
                    <p class="card-text"> Perhaps you need a button </p>
                    <a href="#" class="btn btn-purple btn-round">Go somewhere</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row mt-5" data-aos="fade-up">
            <div class="col-md-4">
              <div class="card shadow-sm border-0">
                <div class="date">
                  <div class="day"> 27 </div>
                  <div class="month"> Mar </div>
                </div>
                <img class="card-img-top" src="@/assets/images/index/3.jpg" />
                <div class="card-body">
                  <h5 class="card-title">Summer holiday is the best</h5>
                  <p class="card-text text-muted"> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
                  <a href="#" class="btn btn-purple btn-round">View More</a>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card shadow-sm border-0">
                <div class="date">
                  <div class="day"> 27 </div>
                  <div class="month"> Mar </div>
                </div>
                <img class="card-img-top" src="@/assets/images/index/3.jpg" />
                <div class="card-body">
                  <h5 class="card-title">Summer holiday is the best</h5>
                  <p class="card-text text-muted"> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
                  <a href="#" class="btn btn-purple btn-round">View More</a>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card shadow-sm border-0">
                <img class="card-img-top" src="@/assets/images/index/3.jpg" />
                <div class="card-body">
                  <h5 class="card-title">Just a card</h5>
                  <p class="card-text text-muted"> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
                  <a href="#" class="btn btn-info btn-round">Read More</a>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section class="pt-5 pb-5 bg-warning rounded mt-5 mb-5" data-aos="fade-up">
          <div class="container text-center">
            <img src="@/assets/images/index/5.ico" /><br />
            <h1 class="mb-3 mt-3">Like what you see?</h1>
            <h3 class="font-weight-light mb-5"
              >Download Anchor UI Kit for <em><strong>free</strong></em> and build something nice upon it!</h3
            >
            <div class="row justify-content-center mb-5">
              <div class="col-lg-3">
                <a class="btn btn-info shadow shadow-lg btn-lg d-block mb-2 btn-round" href="#"> <i class="fas fa-cloud-download-alt mr-1"></i> Download (.zip) </a>
              </div>
              <div class="col-lg-3">
                <a target="_blank" class="btn btn-dark shadow-lg btn-lg d-block mb-2 btn-round" href="https://github.com/wowthemesnet/Anchor-Bootstrap-UI-Kit/fork"> <i class="fab fa-github mr-1"></i> Fork on Github </a>
              </div>
              <div class="col-lg-3">
                <a target="_blank" class="btn btn-danger shadow-lg btn-lg d-block mb-2 btn-round" href="https://www.wowthemes.net/donate/"> <i class="fas fa-coffee"></i> Buy me a coffee </a>
              </div>
            </div>
          </div>
        </section>
      </main>
      <section class="pt-5 pb-5">
        <div class="container">
          <div class="row" data-aos="fade-up">
            <div class="col-lg-6">
              <div class="card flex-md-row mb-4 box-shadow h-xl-300">
                <div class="card-body d-flex flex-column align-items-start">
                  <strong class="d-inline-block mb-2 text-purple">Business</strong>
                  <h3 class="mb-0">
                    <a class="text-dark" href="#">Living the Dream on a Sunny Island</a>
                  </h3>
                  <div class="mb-1 text-muted"> Nov 12 </div>
                  <p class="card-text mb-auto"> This is a wider card with supporting text below as a natural lead-in to additional content. </p>
                  <a class="text-gray" href="#">Continue reading</a>
                </div>
                <img class="card-img-right flex-auto d-none d-md-block" src="@/assets/images/index/6.jpg" />
              </div>
            </div>
            <div class="col-lg-6">
              <div class="card flex-md-row mb-4 box-shadow h-xl-300">
                <div class="card-body d-flex flex-column align-items-start">
                  <strong class="d-inline-block mb-2 text-success">Marketing</strong>
                  <h3 class="mb-0">
                    <a class="text-dark" href="#">Why your marketing can be improved</a>
                  </h3>
                  <div class="mb-1 text-muted"> Nov 12 </div>
                  <p class="card-text mb-auto"> This is a wider card with supporting text below as a natural lead-in to additional content. </p>
                  <a class="text-gray" href="#">Continue reading</a>
                </div>
                <img class="card-img-right flex-auto d-none d-md-block" src="@/assets/images/index/6.jpg" />
              </div>
            </div>
          </div>
          <div class="row gap-y" data-aos="fade-up">
            <div class="col-md-6 col-lg-4">
              <div class="card">
                <img class="img-card-top" src="@/assets/images/index/7.jpg" />
                <div class="card-body">
                  <a href="#">
                    <h5 class="card-title text-dark">10 Steps for a Successful Business without Investing Money</h5>
                    <span class="card-text text-muted"> Posted on May 24, 2019 by Dalida </span>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-4">
              <div class="card">
                <img class="img-card-top" src="@/assets/images/index/7.jpg" />
                <div class="card-body">
                  <a href="#">
                    <h5 class="card-title text-dark">Happy wife is happy life says life experts</h5>
                    <span class="card-text text-muted"> Posted on May 24, 2019 by Sandra </span>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-4">
              <div class="card">
                <img class="img-card-top" src="@/assets/images/index/7.jpg" />
                <div class="card-body">
                  <a href="#">
                    <h5 class="card-title text-dark">Pack your bags and see the world today</h5>
                    <span class="card-text text-muted"> Posted on May 24, 2019 by Mike </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div class="container pt-3 pb-5 mb-5" data-aos="fade-up">
        <div class="pb-4 text-center">
          <h2><span class="text-secondary font-weight-bold">Subscribe</span> to our <strong>newsletter</strong></h2>
          <p class="text-muted"> A lot of features to develop your own lore ipsum. No credit card required. </p>
        </div>
        <form class="row justify-content-center">
          <div class="col-md-3">
            <input type="text" class="form-control input-round w-100 form-control-lg" placeholder="First name*" />
          </div>
          <div class="col-md-3">
            <input type="text" class="form-control input-round w-100 form-control-lg" placeholder="E-mail address*" />
          </div>
          <div class="col-md-3">
            <button type="submit" class="btn btn-info btn-round btn-lg w-100">Subscribe</button>
          </div>
        </form>
      </div>
    </div>
  </NuxtLayout>
</template>

<script setup lang="ts">
const { $aos } = useNuxtApp()
onMounted(() => {
  $aos().init({
    easing: 'ease-out-back',
    duration: 1000,
  })
})
</script>
